<script setup>
import { ref, onMounted, computed } from "vue";
import { ElMessage } from "element-plus";
import { decrypt } from "@/utils/parseDate";
import { wordStructure, advertisementData } from "@/api/api";
import { useStore } from "vuex";
const store = useStore();
const containerRef = (ref < HTMLElement) | (null > null);
const scrollToPosition = (position) => {
  // 执行滚动操作，例如使用window.scrollTo
  window.scrollTo({
    top: position,
    behavior: "smooth",
  });
};
// 绑定事件监听器到el-anchor-link元素
document.querySelectorAll(".el-anchor__link").forEach((link) => {
  link.addEventListener("click", handleAnchorClick);
});
const handleClick = (e) => {
  e.preventDefault();
  const href = e.target.getAttribute("href");
  console.log(href, "href");
  if (href == "#part") {
    let name = "qianyan";
    activeNames.value = [...activeNames.value, name];
    return;
  }
  let arr = listData.value;
  arr.forEach((item, index) => {
    item.array.forEach((value, subIndex) => {
      let title = `#part${index}-${subIndex}`;
      if (title == href) {
        activeNames.value = [...activeNames.value, index];
      }
    });
  });
  // 执行异步操作，例如API请求
  const asyncOperation = async () => {
    // 模拟异步操作，比如延迟1秒
    await new Promise((resolve) => setTimeout(resolve, 400));
    // 异步操作完成后，滚动到对应位置
    const element = document.querySelector(href);
    if (element) {
      scrollToPosition(element.offsetTop);
    }
  };
  asyncOperation();
};
// 加载状态
const loading = ref(false);
const listData = ref([]);
const activeNames = ref([]);
const anchorLink = ref([]);
const isShow = ref(false);
const adInfo = ref({});
// 获取广告
async function getAdvertisementData() {
  try {
    const result = await advertisementData();
    if (result.status === 0) {
      let info = JSON.parse(result.result);
      console.log(info, "info");
      isShow.value = info.isShow;
      adInfo.value = info;
    }
  } catch (error) {
    // throw new Error(error)
  }
}
// 获取搜索类型
async function getWordStructure() {
  try {
    const result = await wordStructure();
    if (result.status === 0) {
      let arr = JSON.parse(result.result);
      console.log(arr, "arr");
      listData.value = arr;
      // activeNames.value = arr.map((_, index) => index);
      let list = [];
      arr.forEach((item) => {
        let data = item.array.map((value, index) => ({
          title: `${item.subjectTitle}-${value.title}`,
        }));
        list.push(data);
      });
      let linkList = list
        .map((item, index) =>
          item.map((value, subIndex) => ({
            href: `#part${index}-${subIndex}`, // 修改锚点以匹配更具体的元素，可选
            title: value.title,
          }))
        )
        .reduce((acc, cur) => acc.concat(cur), []); // 扁平化数组
      anchorLink.value = linkList;
    }
  } catch (error) {
    // throw new Error(error)
  }
}

onMounted(() => {
  getAdvertisementData();
  getWordStructure();
});
</script>
<template>
  <div class="school affix-container">
    <el-affix
      target=".affix-container"
      position="top"
      :offset="0"
      style="width: 240px; margin-left: 10px; height: 0"
    >
      <el-anchor
        :container="containerRef"
        direction="vertical"
        type="default"
        @click="handleClick"
      >
        <el-anchor-link href="#part" title="前言（必读）" />
        <el-anchor-link
          v-for="(item, index) in anchorLink"
          :key="index"
          :href="item.href"
          :title="item.title"
        />
      </el-anchor>
    </el-affix>
    <div class="con" ref="containerRef">
      <div
        class="loading"
        v-if="loading"
        v-loading="loading"
        element-loading-text="数据加载中"
      ></div>
      <template v-else>
        <div class="mb30">
          <el-collapse v-model="activeNames">
            <el-collapse-item name="qianyan">
              <template #title>
                <div class="fl-start-center">
                  <img
                    src="../../assets/qianyan.png"
                    style="width: 25px; height: 25px"
                  />
                  <div class="ft26 font-bold ml5">前言（必读）</div>
                </div>
              </template>
              <div class="header" id="part">
                <div class="text-editor">
                  <span
                    >408很难。但我们研究了从09年到23年的真题，发现真题对知识点的考察</span
                  >
                  <span class="text-highlight-background underline"
                    >有很强的规律性！</span
                  >
                  <span>以数据结构的选择题为例，我们做了下面几件事情</span>
                </div>
                <div class="text-editor-tips fl-start mt15">
                  <div class="ft20">💡</div>
                  <div class="ml15">
                    <div class="text-editor-tips_content">
                      <span class="text-editor-tips_title">第①步：</span>
                      <span class="text-editor-tips_desc"
                        >将09~23年的408真题里所有数据结构相关的题目挑选出来</span
                      >
                    </div>
                    <div class="mt10 text-editor-tips_content">
                      <span class="text-editor-tips_title">第②步：</span>
                      <span class="text-editor-tips_desc"
                        >找了一批分数在130+以上的学长学姐，根据考察的知识点，总结出</span
                      >
                      <span class="text-highlight-background underline"
                        >51个真题考点。</span
                      >
                    </div>
                    <div class="mt10 text-editor-tips_content">
                      <span class="text-editor-tips_title">第③步：</span>
                      <span class="text-editor-tips_desc"
                        >按照知识点被考察的频次又将这51个考点划分为：</span
                      >
                      <span class="text-highlight-background underline"
                        >核心考点（10个）、常考点（7个）、一般考点（35个）</span
                      >
                    </div>
                    <div class="mt10 text-editor-tips_content">
                      <span class="text-editor-tips_title">第④步：</span>
                      <span class="text-editor-tips_desc"
                        >针对这51个考点，我们出了一套讲义，每个讲义争取将这个考点最核心的知识点拆解清楚，帮助大家能够</span
                      >
                      <span class="text-highlight-background underline"
                        >真正无痛化看懂知识点</span
                      >
                    </div>
                  </div>
                </div>
                <div class="mt15">
                  <div class="quote-container-block">
                    <div class="quote-container-block_text">
                      当这51个考点讲义完成后，我们做了一个实验：
                    </div>
                  </div>
                  <div class="ft16 mt15 lh26 color-black">
                    找了一个25考研刚学数据结构一周的同学（基础比较差），花了21天左右的时间（差不多一天学2~3个考点）把这51个考点学完，然后我们模仿真题的难度和考察方式，出了5套数据结构选择题的模拟卷，结果她这5套卷子都拿到了90以上的分数（总分100）
                  </div>
                  <div class="ft16 mt40 lh26 color-black">
                    以上这些工作直接颠覆了参与这项教案的学长学姐认知，他们当初都是硬着头皮啃某道的书本，里面生涩难懂的公式定理和官话学起来特别耗时和费力。
                  </div>
                  <div
                    class="text-highlight-background mt40 ft16"
                    style="padding: 2px"
                  >
                    是的，我们发现了一条新的408学习之路。于是又花了接近半年时间，将408四门课程划分成了208个考点（选择题+综合应用题），并且做了非常通俗易懂的讲义，让大家像打怪升级一样在最短的时间掌握最核心的考点知识！！
                  </div>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item
              v-for="(ele, index) in listData"
              :key="index"
              :name="index"
            >
              <template #title>
                <div class="fl-start-center">
                  <img
                    :src="ele.subjectIconUrl"
                    style="width: 25px; height: 25px"
                  />
                  <div class="ft26 font-bold ml5">{{ ele.subjectTitle }}</div>
                </div>
              </template>
              <div v-if="ele.collectTotal">
                <div class="item-list1">
                  <span>
                    <span class="ft20">💡</span
                    ><span class="item-list1_title">
                      真题考点分布汇总👉：
                    </span>
                  </span>
                  <span>
                    <el-link
                      :underline="false"
                      :href="ele.collectTotal.jumpUrl"
                      target="_blank"
                      class="ft16"
                    >
                      <div
                        class="fl-start-center"
                        :class="
                          ele.collectTotal.lockFlag
                            ? 'item-list2_lock'
                            : 'item-list2_unlock'
                        "
                      >
                        <el-icon>
                          <Menu />
                        </el-icon>
                        <div>
                          {{ ele.collectTotal.title }}
                        </div>
                      </div>
                    </el-link>
                  </span>
                </div>
              </div>
              <div
                class="mt10 list-container"
                v-for="(item, current) in ele.array"
                :key="current"
              >
                <div
                  class="quote-container-block mt15"
                  :id="`part${index}-${current}`"
                >
                  <div class="quote-container-block_text">
                    {{ item.title }}
                  </div>
                </div>
                <div class="ml10">
                  <div class="mt10" v-for="(v, i) in item.children" :key="i">
                    <div class="item-list2">
                      <el-link
                        :underline="false"
                        :href="v.jumpUrl"
                        target="_blank"
                        class="ft16"
                      >
                        <div
                          class="fl-start-center"
                          :class="
                            v.lockFlag ? 'item-list2_lock' : 'item-list2_unlock'
                          "
                        >
                          <el-icon>
                            <Tickets />
                          </el-icon>
                          <div>
                            {{ v.title }}
                          </div>
                        </div>
                      </el-link>
                    </div>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
          <!-- <div v-for="(ele, index) in listData" :key="index">
            <div class="mt30 mb20">
              <div class="ft26 font-bold">{{ ele.subjectTitle }}</div>
            </div>
            <div v-if="ele.collectTotal">
              <div class="item-list1">
                <span>
                  <span class="ft20">💡</span
                  ><span class="item-list1_title"> 真题考点分布汇总👉： </span>
                </span>
                <span>
                  <el-link
                    :underline="false"
                    :href="ele.collectTotal.jumpUrl"
                    target="_blank"
                    class="ft16"
                  >
                    <div
                      class="fl-start-center"
                      :class="
                        ele.collectTotal.lockFlag
                          ? 'item-list2_lock'
                          : 'item-list2_unlock'
                      "
                    >
                      <el-icon>
                        <Menu />
                      </el-icon>
                      <div>
                        {{ ele.collectTotal.title }}
                      </div>
                    </div>
                  </el-link>
                </span>
              </div>
            </div>
            <div
              class="mt10"
              v-for="(item, current) in ele.array"
              :key="current"
            >
              <div class="quote-container-block mt15">
                <div class="quote-container-block_text">
                  {{ item.title }}
                </div>
              </div>
              <div class="mt10" v-for="(v, i) in item.children" :key="i">
                <div class="item-list2">
                  <el-link
                    :underline="false"
                    :href="v.jumpUrl"
                    target="_blank"
                    class="ft16"
                  >
                    <div
                      class="fl-start-center"
                      :class="
                        v.lockFlag ? 'item-list2_lock' : 'item-list2_unlock'
                      "
                    >
                      <el-icon>
                        <Tickets />
                      </el-icon>
                      <div>
                        {{ v.title }}
                      </div>
                    </div>
                  </el-link>
                </div>
              </div>
            </div>
          </div> -->
          <!-- <el-icon><Tickets /></el-icon> <el-icon><Lock /></el-icon>
          <el-icon><Unlock /></el-icon> -->
        </div>
      </template>
    </div>
    <!-- <el-affix
      target=".affix-container"
      position="right"
      :offset="0"
      v-if="isShow"
      style="
        width: 240px;
        margin-left: 10px;
        height: 0;
        position: absolute;
        right: 10px;
      "
    >
      <div>
        <el-button style="color: #4ea6ff;">
          <div class="fl-start-center">
            <img :src="adInfo.tipsIconUrl" style="width: 15px; height: 15px" />
            <div class="ml10">友情推荐</div>
          </div>
        </el-button>
        <div>
          <el-link
            :underline="false"
            :href="adInfo.jumpUrl"
            target="_blank"
            class="ft16" 
          >
            <el-image
              style="width: 240px"
              :src="adInfo.adImageUrl"
              fit="cover"
            />
          </el-link>
        </div>
      </div>
    </el-affix> -->
  </div>
</template>
<style>
::-webkit-scrollbar {
  /* 针对Webkit内核浏览器的滚动条样式 */
  width: 6px;
  /* 设置滚动条宽度 */
}

::-webkit-scrollbar-thumb {
  /* 滚动条里面的小方块 */
  background-color: #cccccc;
  /* 滚动条颜色 */
  border-radius: 10px;
  /* 滚动条圆角 */
}

::-webkit-scrollbar-track {
  /* 滚动条里面的轨道 */
  background: transparent;
  /* 轨道颜色 */
}

body {
  background-color: #fff;
}
</style>
<style lang="less" scoped>
.upload {
  .image {
    width: 220px;
    height: 220px;
  }

  .content {
    height: 100px;
  }
}

::v-deep .upload .el-dialog {
  border-radius: 20px !important;
}

::v-deep .search .el-input__wrapper {
  border-radius: 50px !important;
}

.text-highlight-background {
  font-weight: bold;

  background-color: #f6d5ae;
}

.underline {
  text-decoration-skip-ink: none;
  text-underline-offset: 0.2em;
  text-decoration: underline;
}

.color-block {
  color: #1f2329;
}

.font-bold {
  font-weight: bold;
}

.lh26 {
  line-height: 26px;
}

.ft16 {
  font-size: 16px;
}

.ft26 {
  font-size: 26px;
}

.ft20 {
  font-size: 20px;
}

.ml5 {
  margin-left: 5px;
}

.ml10 {
  margin-left: 10px;
}

.ml15 {
  margin-left: 15px;
}

.ml15 {
  margin-left: 16px;
}

.ml20 {
  margin-left: 20px;
}

.ml30 {
  margin-left: 30px;
}

.mt15 {
  margin-top: 15px;
}

.mt5 {
  margin-top: 5px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb30 {
  margin-bottom: 30px;
}

.mt10 {
  margin-top: 10px;
}

.mt15 {
  margin-top: 15px;
}

.mt20 {
  margin-top: 20px;
}

.mt30 {
  margin-top: 30px;
}

.mt40 {
  margin-top: 40px;
}

.fl-wrap-start-center {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.fl-start {
  display: flex;
  justify-content: flex-start;
}

.fl-start-center {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.fl-end {
  display: flex;
  justify-content: end;
}

.fl-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fl-space-between-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.school {
  box-sizing: border-box;
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  ::v-deep .el-anchor__link {
    font-size: 16px;
  }
  ::v-deep .el-anchor {
    background-color: transparent;
  }
  .header {
    padding: 0 calc((100% - 850px) / 2);
    min-width: 850px;
  }

  .con {
    padding: 0 calc((100% - 850px) / 2);
    min-width: 850px;
    flex: 1;
    overflow: auto;

    .loading {
      height: calc(100% - 190px);
    }

    .text-editor {
      font-size: 16px;
      color: #1f2329;
      line-height: 26px;
    }

    .text-editor-tips {
      font-size: 16px;
      background-color: #f0fbef;
      padding: 15px;
      border: 1px solid transparent;
      border-radius: 8px;

      &_content {
        line-height: 26px;
      }

      &_title {
        font-weight: bold;
        color: #1f2329;
      }

      &_desc {
        color: #1f2329;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
      }
    }
    ::v-deep .el-collapse-item__header {
      height: 68px;
      line-height: 68px;
    }
    .quote-container-block {
      padding-left: 12px;
      margin-right: -2px;
      padding-right: 2px;
      position: relative;

      &_text {
        font-size: 16px;
        color: #646a73;
        font-weight: bold;
        line-height: 26px;
      }
    }

    .quote-container-block::before {
      width: 2px;
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: -2px;
      background: #bbbfc4;
      border-radius: 1px;
      -webkit-transform-origin: top;
      transform-origin: top;
    }
    .list-container {
      .quote-container-block {
        padding-left: 12px;
        margin-right: -2px;
        padding-right: 2px;
        position: relative;

        &_text {
          font-size: 16px;
          color: #646a73;
          font-weight: bold;
          line-height: 26px;
          margin-left: 2px;
        }
      }

      .quote-container-block::before {
        width: 2px;
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 2px;
        background: #bbbfc4;
        border-radius: 1px;
        -webkit-transform-origin: top;
        transform-origin: top;
      }
    }
    .item-list1 {
      background-color: #f0fbef;
      padding: 16px;
      border: 1px solid transparent;
      border-radius: 8px;
      font-size: 16px;

      &_title {
        font-weight: bold;
        color: #1f2329;
      }

      &_desc {
        padding: 3px 2px;
        border-radius: 4px;
        color: #1456f0;
      }

      &_desc:hover {
        background-color: #daeaef;
      }
    }

    .item-list2 {
      font-size: 16px;
      margin-top: 10px;

      &_title {
        font-weight: bold;
        color: #1f2329;
      }

      &_unlock {
        padding: 3px 2px;
        border-radius: 4px;
        color: #1456f0;
      }

      &_unlock:hover {
        background-color: #daeaef;
      }

      &_lock {
        padding: 3px 2px;
        border-radius: 4px;
        color: #646a73;
      }

      &_lock:hover {
        background-color: #eff0f1;
      }
    }
  }
}
</style>
